<template>
  <div class="con">
    <div class="contbox6_10">
      <div class="titlelist6_10">数据统计 / 汇总数据</div>
      <div class="content">
        <div class="son" v-for="(item, index) in tableData" :key="index">
          <div class="cons">{{ item.name }}</div>
          <div class="cons1">
            <div class="name">{{ item.totalPerson }}{{ item.unit }}</div>
            <div class="names">
              <!-- <span>昨日 新增{{item.todayPerson}}{{item.unit}}</span> -->
              <div>
                <span>昨日 新增 {{ item.yesterdayPerson }}{{ item.unit }}</span>
                <div class="box">
                  <img
                    v-if="item.yesterdayPercentage >= 0"
                    src="../../assets/images/up.png"
                  />
                  <img v-else src="../../assets/images/down.png" />
                  <b>{{ Math.abs(item.yesterdayPercentage) }}%</b>
                </div>
              </div>
              <div>
                <span>今日 新增 {{ item.todayPerson }}{{ item.unit }}</span>
                <div class="box">
                  <img
                    v-if="item.todayPercentage >= 0"
                    src="../../assets/images/up.png"
                  />
                  <img v-else src="../../assets/images/down.png" />
                  <b>{{ Math.abs(item.todayPercentage) }}%</b>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: []
    };
  },
  created() {
    this.first();
  },
  methods: {
    first() {
      var _this = this;
      _this
        .axios({
          //axios请求
          method: "post",
          url: "/api/dataStatistics/homePageStatistics",
          data: _this.form
        })
        .then(res => {
          // alert(JSON.stringify(d))
          // console.log(d)
          if (res.data.code == "0000") {
            res.data.data.forEach(item => {
              console.log(item);
              if (item.todayPercentage == "0E-8") {
                item.todayPercentage = 0;
              }
              if (item.yesterdayPercentage == "0E-8") {
                item.yesterdayPercentage = 0;
              }
            });
            _this.tableData = res.data.data;
          }
        })
        .catch();
    }
  }
};
</script>

<style scoped>
.con {
  position: relative;
}
.contbox6_10 {
  width: 100%;
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.header {
  margin-top: 42px;
  margin-left: 30px;
  font-weight: bold;
  font-size: 16px;
}
.content {
  min-width: calc(100% - 40px);
  padding: 0 20px;
  /* margin: 0;
  margin-bottom: 20px */
  /* padding: 0 30px;
  width: 100%;
  min-height: 200px */
}
.son {
  min-width: 504px;
  height: 172px;
  background: #f9fafc;
  border-radius: 4px;
  float: left;
  margin-right: 30px;
  margin-top: 20px;
}
.content .son:nth-child(3n-2) {
  margin-left: 0px;
}
.cons {
  width: 100%;
  height: 52px;
  border-bottom: 1px solid #ebeef5;
  font-size: 16px;
  line-height: 62px;
  padding-left: 20px;
}
.cons1 {
  width: 100%;
  height: 120px;
  float: left;
}
.name {
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 120px;
  font-size: 20px;
  float: left;
}
.names {
  width: 50%;
  height: 100%;
  float: left;
  text-align: center;
  padding-top: 40px;
}
.names > div{
  width: 100%;
  float: left;
}
span {
  display: block;
  min-width: 50%;
  float: left;
}
.box {
  display: block;
  min-width: 20%;
  float: left;
}
img {
  width: 18px;
  height: 16px;
  font-weight: bold;
  padding-bottom: 3px;
}
</style>
